
<template>
    <div>      
        <h1>服务管理</h1>
        <Table :columns="columns1" :data="data1"></Table>
        <router-link to="addService">
        </router-link>
        <h1>添加服务</h1>
        <div class="con">
            <div class="text">
                <span>服务名称</span>
                <input type="text" v-model="name">

            </div>
            <div class="text">
                <span>服务描述</span>
                <input type="text" v-model="des">

            </div>
            <!-- <div class="text">
                <span>服务单价</span>
                <input type="text" v-model="price">

            </div> -->
            <div class="text">
                <span>图标</span>
                <input type="file" id="file">

            </div>
            <span @click="ok">
            <Button type="primary">增加</Button>
            </span>    
        </div>
        <Modal
            v-model="modal1"
            title="确认信息"
            @on-ok="ok1">
            <Span>确认删除</Span>
        </Modal>          
    </div>
</template>
<script>
export default {
    data() {
        return {
            name:'',
            des:'',
            price:0,
            index:0,
            modal1:false,
            columns1: [
                {
                    title: "服务名称",
                    key: "name"
                },
                {
                    title: "服务描述",
                    key: "des"
                },
                // {
                //     title: "服务单价",
                //     key: "price"
                // },
                {
                    title: "icon",
                    key: "icon_url",
                    render: (h, params) => {
                        return h('div', {
                            attrs: {
                                style: 'width: 60px;height: 60px;'
                            },                    
                        }, 
                        [
                            h('img', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                attrs: {
                                    src: params.row.icon_url, style: 'width: 60px;height: 60px;border-radius: 2px;'
                                },
                                style: {
                                },
                                
                            }),
                        ]);
                    }
                },
                {
                    title: "编辑",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                },
                                "删除"
                            )
                        ]);
                    }
                }
            ],
            data1: [
                // {
                //     name: "John Brown",
                //     age: 18,
                //     address: "New York No. 1 Lake Park",
                //     date: "2016-10-03"
                // },
                // {
                //     name: "Jim Green",
                //     age: 24,
                //     address: "London No. 1 Lake Park",
                //     date: "2016-10-01"
                // },
                // {
                //     name: "Joe Black",
                //     age: 30,
                //     address: "Sydney No. 1 Lake Park",
                //     date: "2016-10-02"
                // },
                // {
                //     name: "Jon Snow",
                //     age: 26,
                //     address: "Ottawa No. 2 Lake Park",
                //     date: "2016-10-04"
                // }
            ]
        };
    },
    mounted() {
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('3') < 0){
            alert("您没有权限");
            return;
        }
        this.getService();
    },
    methods: {
        getService(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getAllService`,
                //url: `${this.siteUrl}/getInvitation`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.data1 = response.data.data;
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        ok(){
            var param = new FormData();
            param.append("name", this.name);
            param.append("des", this.des);
            param.append("file", document.getElementById("file").files[0]);
            param.append("id", `${this.data1.id}`);
            param.append("price", this.price);
            param.append("aid", localStorage.getItem("aid"));
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/insertService`,
                data: param
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.getService();
                        alert("添加成功");
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        remove(index){
            this.index = index;
            this.modal1 = true;            
        },
        ok1(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/deleteOneService`,
                //url: `${this.siteUrl}/getInvitation`,
                data: qs.stringify(
                    {id:`${this.data1[this.index].id}`}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.data1.splice(this.index, 1);
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        }
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    margin-bottom: 20px;
    margin-top:20px;
}
button {
    margin-top: 50px;
}
span{
    display: inline-block;
    width: 100px;
    font-size: 16px;
}
</style>
